<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>
        blogs
    </title>
    
<link rel="stylesheet" href="/libs/highlight/styles/monokai-sublime.css">

    
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body id="bodyx">
    <div class="hd posts">
    <a href="/index.html"><i class="fa fa-reply replay-btn" aria-hidden="true"></i></a>
    <div class="post-title">
        <p>
            学习ES6语法(5)
        </p>
        <hr>
    </div>
    <div class="post-content">
        <h1 id="九、ES6箭头函数和扩展"><a href="#九、ES6箭头函数和扩展" class="headerlink" title="九、ES6箭头函数和扩展"></a>九、ES6箭头函数和扩展</h1><ul>
<li><p>ES5中的函数写法。写一个函数，进行一个加法计算</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add(<span class="number">4</span>,<span class="number">5</span>); <span class="comment">// 9</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>默认值</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">在ES6中给我们增加了默认值的操作，我们修改上边的代码，可以看到现在只需要传递一个参数也是可以正常运行的</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">x,y=<span class="number">5</span></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> x+y;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">4</span>)); <span class="comment">// 9</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>主动抛出错误</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">在使用Vue的框架中，可以经常看到框架主动抛出一些错误，比如v-<span class="keyword">for</span>必须有:key值。那尤大神是如何做到的那？其实很简单，ES6中我们直接用<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>( xxxx ),就可以抛出错误</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b=<span class="number">1</span></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(a == <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'This is error'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">     <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">0</span>));</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>函数中的严谨模式</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">我们在ES中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b=<span class="number">1</span></span>)</span>&#123;</span><br><span class="line"><span class="meta">    'use strict'</span></span><br><span class="line">    <span class="keyword">if</span>(a == <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'This is error'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">     <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>));  </span><br><span class="line"></span><br><span class="line">上边的代码如果运行的话，你会发现浏览器控制台报错，这是ES6中的一个坑，如果没人指导的话，可能你会陷进去一会。这个错误的原因就是如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line"><span class="meta">    'use strict'</span></span><br><span class="line">    <span class="keyword">if</span>(a == <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'This is error'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">     <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>,<span class="number">2</span>));</span><br><span class="line"></span><br><span class="line">在使用严谨模式编程就不能给传递参数赋值一个默认参数，这样可能会出现一定的坑(错误)</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>获得需要传递的参数个数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">如果你在使用别人的框架时，不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line"><span class="meta">    'use strict'</span></span><br><span class="line">    <span class="keyword">if</span>(a == <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'This is error'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">     <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add.length);</span><br><span class="line"></span><br><span class="line">这时控制台打印出了<span class="number">2</span>，但是如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了<span class="number">1</span>， 也就是说它得到的是必须传入的参数</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>箭头函数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">在学习Vue的时候，我已经大量的使用了箭头函数，因为箭头函数真的很好用，我们来看一个最简单的箭头函数。也就是上边我们写的add函数，进行一个改变，写成箭头函数</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> add = <span class="function">(<span class="params">a,b</span>) =&gt;</span> a+b</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">4</span>,<span class="number">5</span>))</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>{}的使用</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上&#123;&#125;括号。例如下边的代码就必须使用&#123;&#125;.</span><br><span class="line"><span class="keyword">var</span> add =<span class="function">(<span class="params">a,b=<span class="number">1</span></span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'jspang'</span>)</span><br><span class="line">    <span class="keyword">return</span> a+b;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>));</span><br><span class="line">箭头函数中不可加<span class="keyword">new</span>，也就是说箭头函数不能当构造函数进行使用</span><br></pre></td></tr></table></figure>





</li>
</ul>
<h1 id="十、ES6中的函数和数组补漏"><a href="#十、ES6中的函数和数组补漏" class="headerlink" title="十、ES6中的函数和数组补漏"></a>十、ES6中的函数和数组补漏</h1><ul>
<li><p>对象的函数解构</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">我们在前后端分离时，后端经常返回来<span class="built_in">JSON</span>格式的数据，前端的美好愿望是直接把这个<span class="built_in">JSON</span>格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> json=&#123;</span><br><span class="line">    a:<span class="string">'haha'</span>,</span><br><span class="line">    b:<span class="string">'heihei'</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fun = <span class="function">(<span class="params">&#123;a,b=<span class="string">"haha"</span>&#125;</span>) =&gt;</span> <span class="built_in">console</span>.log(a,b);</span><br><span class="line"></span><br><span class="line">fun(json)</span><br><span class="line"></span><br><span class="line">传递对象块，不用单个赋值</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>数组的函数解构</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">函数能解构<span class="built_in">JSON</span>，那解构我们的数组就更不在话下了，我们看下边的代码。我们声明一个数组，然后写一个方法，最后用…进行解构赋值</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'免费教程'</span>];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params">a,b,c</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(a,b,c);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">fun(...arr); <span class="comment">//扩展运算符</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>in的用法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">in</span>是用来判断对象或者数组中是否存在某个值的。我们先来看一下用<span class="keyword">in</span>如何判断对象里是否有某个值</span><br></pre></td></tr></table></figure>

<ul>
<li><p><strong>对象判断</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj=&#123;</span><br><span class="line">    a:<span class="string">'jspang'</span>,</span><br><span class="line">    b:<span class="string">'技术胖'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'a'</span> <span class="keyword">in</span> obj);  <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>数组判断</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">先来看一下ES5判断的弊端，以前会使用length属性进行判断，为<span class="number">0</span>表示没有数组元素。但是这并不准确，或者说真实开发中有弊端</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[,,,,,];</span><br><span class="line"><span class="built_in">console</span>.log(arr.length); <span class="comment">//5</span></span><br><span class="line"></span><br><span class="line">上边的代码输出了<span class="number">5</span>，但是数组中其实全是空值，这就是一个坑啊。那用ES6的<span class="keyword">in</span>就可以解决这个问题</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[,,,,,];</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> <span class="keyword">in</span> arr); <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>];</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> <span class="keyword">in</span> arr1);  <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line">这里的<span class="number">0</span>指的是数组下标位置是否为空。</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>数组的遍历方法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、forEach</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'前端教程'</span>];</span><br><span class="line"></span><br><span class="line">arr.forEach(<span class="function">(<span class="params">val,index</span>)=&gt;</span><span class="built_in">console</span>.log(index,val));</span><br><span class="line"></span><br><span class="line">forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙</span><br><span class="line"></span><br><span class="line"><span class="number">2.</span>filter</span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'前端教程'</span>];</span><br><span class="line"></span><br><span class="line">arr.filter(<span class="function"><span class="params">x</span>=&gt;</span><span class="built_in">console</span>.log(x)); <span class="comment">//也有循环的功能</span></span><br><span class="line"></span><br><span class="line"><span class="number">3.</span>some</span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'前端教程'</span>];</span><br><span class="line"></span><br><span class="line">arr.some(<span class="function"><span class="params">x</span>=&gt;</span><span class="built_in">console</span>.log(x));</span><br><span class="line"></span><br><span class="line"><span class="number">4.</span>map</span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'前端教程'</span>];</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.map(<span class="function"><span class="params">x</span>=&gt;</span><span class="string">'web'</span>));</span><br><span class="line"></span><br><span class="line">map在这里起到一个替换的作用，这个我们后续课程会详细讲解</span><br></pre></td></tr></table></figure>
</li>
<li><p>数组转换字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">在开发中我们经常会碰到把数组输出成字符串的形式,主要两者之间的区别</span><br><span class="line"></span><br><span class="line"><span class="number">1</span>、join方法</span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'前端教程'</span>];</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.join(<span class="string">'|'</span>));</span><br><span class="line"></span><br><span class="line">join()方法就是在数组元素中间，加了一些间隔</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>、toString</span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'前端教程'</span>];</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.toString()); <span class="comment">//转换时只是用逗号隔开了</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<h1 id="十一、ES6对象"><a href="#十一、ES6对象" class="headerlink" title="十一、ES6对象"></a>十一、ES6对象</h1><ul>
<li><p>对象对于Javascript是非常重要的。在ES6中对象有了很多新特性</p>
</li>
<li><p><strong>对象赋值</strong></p>
<ul>
<li><p>ES6允许把声明的变量直接赋值给对象，举个栗子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name=<span class="string">"jspang"</span>;</span><br><span class="line"><span class="keyword">let</span> skill= <span class="string">'web'</span>;</span><br><span class="line"><span class="keyword">var</span> obj= &#123;name,skill&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(obj);  <span class="comment">//Object &#123;name: "jspang", skill: "web"&#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p><strong>对象Key值构建</strong></p>
<ul>
<li><p>有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们如何构建我们的key值那。比如我们在后台取了一个key值，然后可以用[ ] 的形式，进行对象的构建</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> key=<span class="string">'skill'</span>;</span><br><span class="line"><span class="keyword">var</span> obj=&#123;</span><br><span class="line">    [key]:<span class="string">'web'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.skill);</span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>自定义对象方法</strong></p>
<ul>
<li><p>对象方法就是把兑现中的属性，用匿名函数的形式编程方法。这个在以前就有应用，我们这里只是简单的复习一下。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj=&#123;</span><br><span class="line">    add:<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> a+b;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.add(<span class="number">1</span>,<span class="number">2</span>));  <span class="comment">//3</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>Object.is( ) 对象比较</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">对象的比较方法,以前进行对象值的比较，经常使用===来判断</span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;<span class="attr">name</span>:<span class="string">'jspang'</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;<span class="attr">name</span>:<span class="string">'jspang'</span>&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(obj1.name === obj2.name);<span class="comment">//true</span></span><br><span class="line"></span><br><span class="line">ES6为我们提供了is方法进行对比</span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;<span class="attr">name</span>:<span class="string">'jspang'</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;<span class="attr">name</span>:<span class="string">'jspang'</span>&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(obj1.name === obj2.name);<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(obj1.name,obj2.name)); <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line">区分=== 和 is方法的区别是什么</span><br><span class="line"><span class="built_in">console</span>.log(+<span class="number">0</span> === <span class="number">-0</span>);  <span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> === <span class="literal">NaN</span> ); <span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(+<span class="number">0</span>,<span class="number">-0</span>)); <span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="literal">NaN</span>,<span class="literal">NaN</span>)); <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>注意： ===为同值相等，is为严格相等</strong></p>
</li>
</ul>
</li>
<li><p><strong>Object.assign( )合并对象</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">操作数组时我们经常使用数组合并，那对象也有合并方法，那就是assgin( )</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a=&#123;<span class="attr">a</span>:<span class="string">'jspang'</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> b=&#123;<span class="attr">b</span>:<span class="string">'技术胖'</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> c=&#123;<span class="attr">c</span>:<span class="string">'web'</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d=<span class="built_in">Object</span>.assign(a,b,c)</span><br><span class="line"><span class="built_in">console</span>.log(d);</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h1 id="十二、Symbol在对象中的作用"><a href="#十二、Symbol在对象中的作用" class="headerlink" title="十二、Symbol在对象中的作用"></a>十二、Symbol在对象中的作用</h1><ul>
<li><p>场景应用的方式学习Symbol，它的意思是全局标记</p>
</li>
<li><p><strong>声明Symbol</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">如何声明并且对数据类型进行打印</span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">String</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> <span class="built_in">Number</span>;</span><br><span class="line"><span class="keyword">var</span> c = <span class="keyword">new</span> <span class="built_in">Boolean</span>;</span><br><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Array</span>;</span><br><span class="line"><span class="keyword">var</span> e = <span class="keyword">new</span> <span class="built_in">Object</span>; </span><br><span class="line"><span class="keyword">var</span> f= <span class="built_in">Symbol</span>();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span>(d));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span>(f));</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>Symbol的打印</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">声明symbol</span><br><span class="line"><span class="keyword">var</span> g = <span class="built_in">Symbol</span>(<span class="string">'jspang'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(g);  <span class="comment">// 红色</span></span><br><span class="line"><span class="built_in">console</span>.log(g.toString()); <span class="comment">//黑色</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><em>*Symbol在对象中的应用</em></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">看一下如何用<span class="built_in">Symbol</span>构建对象的Key，并调用和赋值</span><br><span class="line"><span class="keyword">var</span> jspang = <span class="built_in">Symbol</span>();</span><br><span class="line"><span class="keyword">var</span> obj=&#123;</span><br><span class="line">    [jspang]:<span class="string">'技术胖'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj[jspang]);</span><br><span class="line">obj[jspang]=<span class="string">'web'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(obj[jspang]);</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>Symbol对象元素的保护作用</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用<span class="built_in">Symbol</span>进行保护</span><br><span class="line"></span><br><span class="line">没有保护写法</span><br><span class="line"><span class="keyword">var</span> obj=&#123;<span class="attr">name</span>:<span class="string">'jspang'</span>,<span class="attr">skill</span>:<span class="string">'web'</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">in</span> obj)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(obj[item]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">保护写法</span><br><span class="line"><span class="keyword">let</span> obj=&#123;<span class="attr">name</span>:<span class="string">'jspang'</span>,<span class="attr">skill</span>:<span class="string">'web'</span>&#125;;</span><br><span class="line"><span class="keyword">let</span> age=<span class="built_in">Symbol</span>();</span><br><span class="line">obj[age]=<span class="number">18</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">in</span> obj)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(obj[item]);</span><br><span class="line">&#125; </span><br><span class="line"><span class="built_in">console</span>.log(obj);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h1 id="十三、Set和WeakSet数据结构"><a href="#十三、Set和WeakSet数据结构" class="headerlink" title="十三、Set和WeakSet数据结构"></a>十三、Set和WeakSet数据结构</h1><ul>
<li><p><strong>数据结构</strong>它是ES6中新的东西，并且很有用处。Set的数据结构是以数组的形式构建的</p>
</li>
<li><p><strong>Set的声明</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(setArr);<span class="comment">//Set &#123;"jspang", "技术胖", "web"&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Set</span>和<span class="built_in">Array</span> 的区别是<span class="built_in">Set</span>不允许内部有重复的值，如果有只显示一个，相当于去重。虽然<span class="built_in">Set</span>很像数组，但是他不是数组</span><br></pre></td></tr></table></figure>

<ul>
<li><p><strong>Set值的增删查</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、追加add：</span><br><span class="line"></span><br><span class="line">在使用<span class="built_in">Array</span>的时候，可以用push进行追加值，那<span class="built_in">Set</span>稍有不同，它用更语义化的add进行追加</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(setArr);<span class="comment">//Set &#123;"jspang", "技术胖", "web"&#125;</span></span><br><span class="line"></span><br><span class="line">setArr.add(<span class="string">'前端职场'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(setArr);</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>、删除<span class="keyword">delete</span></span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(setArr);<span class="comment">//Set &#123;"jspang", "技术胖", "web"&#125;</span></span><br><span class="line"></span><br><span class="line">setArr.add(<span class="string">'前端职场'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(setArr); <span class="comment">//Set &#123;"jspang", "技术胖", "web", "前端职场"&#125;</span></span><br><span class="line"></span><br><span class="line">setArr.delete(<span class="string">'前端职场'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(setArr); <span class="comment">//Set &#123;"jspang", "技术胖", "web"&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="number">3</span>、查找has：</span><br><span class="line">用has进行值的查找，返回的是<span class="literal">true</span>或者<span class="literal">false</span>。</span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(setArr);<span class="comment">//Set &#123;"jspang", "技术胖", "web"&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(setArr.has(<span class="string">'jspang'</span>));<span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="number">4</span>、删除clear:</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(setArr);<span class="comment">//Set &#123;"jspang", "技术胖", "web"&#125;</span></span><br><span class="line">setArr.clear();</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(setArray);<span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="number">5</span>、<span class="keyword">set</span>的循环 for…of…循环：</span><br><span class="line">let setArr = new Set(['jspang','技术胖','web','jspang']);</span><br><span class="line">for (let item of setArr)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(item);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="number">6</span>、size属性</span><br><span class="line">size属性可以获得<span class="built_in">Set</span>值的数量 == 数组的length</span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> setArr)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(item);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(setArr.size);</span><br><span class="line"></span><br><span class="line"><span class="number">7</span>、forEach</span><br><span class="line"><span class="keyword">let</span> setArr = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'web'</span>,<span class="string">'jspang'</span>]);</span><br><span class="line">setArr.forEach(<span class="function">(<span class="params">value</span>)=&gt;</span><span class="built_in">console</span>.log(value));</span><br></pre></td></tr></table></figure>
</li>
<li><p>WeakSet的声明</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">WeakSet</span> 在<span class="keyword">set</span>参数的时候更像是对象传递参数</span><br><span class="line">let weakObj=new WeakSet();</span><br><span class="line">let obj=&#123;a:<span class="string">'jspang'</span>,<span class="attr">b</span>:<span class="string">'技术胖'</span>&#125;</span><br><span class="line">weakObj.add(obj);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(weakObj);</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>注意的是，如果你直接在new 的时候就放入值，将报错</strong></p>
</li>
<li><p><strong>WeakSet</strong>里边的值也是<strong>不允许重复</strong>的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> weakObj=<span class="keyword">new</span> <span class="built_in">WeakSet</span>();</span><br><span class="line"><span class="keyword">let</span> obj=&#123;<span class="attr">a</span>:<span class="string">'jspang'</span>,<span class="attr">b</span>:<span class="string">'技术胖'</span>&#125;</span><br><span class="line"><span class="keyword">let</span> obj1=obj;</span><br><span class="line"></span><br><span class="line">weakObj.add(obj);  </span><br><span class="line">weakObj.add(obj1)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(weakObj);</span><br><span class="line"></span><br><span class="line">实际开发中<span class="built_in">Set</span>用的比较多，<span class="built_in">WeakSet</span>用的并不多，但是他对传入值必须是对象作了很好的判断，我们灵活应用还是有一定的用处的</span><br></pre></td></tr></table></figure>

</li>
</ul>
</li>
</ul>
<h1 id="十四、map数据结构"><a href="#十四、map数据结构" class="headerlink" title="十四、map数据结构"></a>十四、map数据结构</h1><ul>
<li><p>map是一种灵活，简单的适合一对一查找的数据结构  key:value</p>
</li>
<li><p>Json和map格式的对比</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">map的效率和灵活性更好</span><br><span class="line">json对象模拟操作</span><br><span class="line"><span class="keyword">let</span> json = &#123;</span><br><span class="line">    name:<span class="string">'jspang'</span>,</span><br><span class="line">    skill:<span class="string">'web'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(json.name);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">是这种反应的速度要低于数组和map结构。而且<span class="built_in">Map</span>的灵活性要更好，你可以把它看成一种特殊的键值对，但你的key可以设置成数组，值也可以设置成字符串，让它不规律对应起来</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> json = &#123;</span><br><span class="line">    name:<span class="string">'jspang'</span>,</span><br><span class="line">    skill:<span class="string">'web'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(json.name);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> map=<span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">map.set(json,<span class="string">'iam'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(map);</span><br><span class="line"></span><br><span class="line">当然也可key字符串，value是对象。我们调换一下位置，依然是符合map的数据结构规范的</span><br><span class="line">map.set(<span class="string">'jspang'</span>,json);</span><br><span class="line"><span class="built_in">console</span>.log(map);</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>map的增删查</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line"></span><br><span class="line">map.set(<span class="string">"js"</span>,json);</span><br><span class="line"><span class="built_in">console</span>.log(map)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>取值get</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">map.get(json)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>删除delete</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">删除<span class="keyword">delete</span>的特定值</span><br><span class="line">map.delete(json)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>size属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">map.size  <span class="comment">//长度</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>查找是否存在has</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">map.has(<span class="string">"元素"</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>清楚所以元素</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">map.clear()</span><br></pre></td></tr></table></figure>

<p>map的灵活性和高效性都在开发中常用到的</p>
</li>
</ul>

    </div>
    
        <hr class="fhr">
        <div id="vcomments"></div>
    
</div>
    <div class="footer" id="footer">
    <p>Copyright © 2020 <a class="flink" href="https://hexo.io" target="_blank" rel="noopener">Hexo</a>-<a class="flink" href="https://github.com/sanjinhub/hexo-theme-geek" target="_blank" rel="noopener">Geek</a>.
        <label class="el-switch el-switch-green el-switch-sm" style="vertical-align: sub;">
            <input type="checkbox" name="switch" id="update_style">
            <span class="el-switch-style"></span>
        </label>
<!--         <script type="text/javascript">
        var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cspan id='cnzz_stat_icon_1278548644'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/stat.php%3Fid%3D1278548644%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
        </script> -->
    </p>
</div>
<input type="hidden" id="web_style" value="black">
<input type="hidden" id="valine_appid" value="oU6aM6U9xOv4LHEQLo3LLROT-gzGzoHsz">
<input type="hidden" id="valine_appKey" value="TbfimrkuMCSYC9BPMRdOqKga">

<script src="/libs/jquery.min.js"></script>


<script src="/libs/highlight/highlight.pack.js"></script>

<script src='//cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>

<script src="/js/js.js"></script>

<style type="text/css">
.v * {
    color: #698fca;
}

.v .vlist .vcard .vhead .vsys {
    color: #3a3e4a;
}

.v .vlist .vcard .vh .vmeta .vat {
    color: #638fd5;
}

.v .vlist .vcard .vhead .vnick {
    color: #6ba1ff;
}

.v a {
    color: #8696b1;
}

.v .vlist .vcard .vhead .vnick:hover {
    color: #669bfc;
}
</style>
</body>

</html>